<template>
  <view class="main">
    <view class="box box1">
      <image src="" class="sp" mode="aspectFill" />
      <view class="r">
        <view class="line1">
          <view class="name">【光子嫩肤|全模式】</view>
          <view class="st">未使用</view>
        </view>
        <view class="line2">粉色套装</view>
        <view class="line3">
          <view>x1</view>
          <view>¥ 97.00</view>
        </view>
      </view>
    </view>
    <view class="box">
      <view class="dd">
        <image class="ddimg" src="@/static/shop/dd.png" mode="aspectFill" />
        <view class="r">
          <view class="t">浙江省杭州市滨江区江汉路1515号龙湖 滨江天街B-2f</view>
          <view class="b">
            <view>距离江汉路地铁站C口步行100米</view>
            <view class="ricon">
              <image src="@/static/shop/dh.png" mode="aspectFill" />
              <image src="@/static/shop/tel.png" mode="aspectFill" />
            </view>
          </view>
        </view>
      </view>
      <view class="tt">
        <view class="tl">核销二维码</view>
        <view class="tr">使用时间：12:00—14:00</view>
      </view>
      <view class="ewmBox">
        <image src="" class="ewm" mode="aspectFill" />
        <view>凭二维码进入场馆</view>
      </view>
    </view>
    <view class="shopBox">
      <view class="item">
        <view class="l">订单号:</view>
        <view class="r">{{ 123 }}</view>
      </view>
      <view class="item">
        <view class="l">下单时间:</view>
        <view class="r">{{ dayjs().format("YYYY-MM-DD HH:mm:ss") }}</view>
      </view>
      <view class="item">
        <view class="l">支付方式:</view>
        <view class="r">{{ 123 }}</view>
      </view>
      <view style="border-bottom: 1px solid #f3f3f3; margin-top: 32rpx"></view>
      <view class="item" style="justify-content: space-between">
        <view class="l">商品金额:</view>
        <view class="r" style="font-weight: 600">¥{{ 12313 }}</view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import dayjs from "dayjs";
</script>
<style lang="less" scoped>
.box {
  background: #fff;
  padding: 32rpx;
  margin-bottom: 20rpx;
}
.box1 {
  display: flex;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  .sp {
    width: 140rpx;
    height: 140rpx;
    background: #d6c8c7;
    border-radius: 20rpx;
    margin-right: 32rpx;
  }
  .r {
    width: calc(100% - 172rpx);
    .line1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 26rpx;
      color: #333333;
      .st {
        color: #81d8d0;
      }
    }
    .line2 {
      font-size: 28rpx;
      color: #8a8a8d;
      margin-top: 8rpx;
    }
    .line3 {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      font-size: 24rpx;
      color: #8a8a8d;
    }
  }
}
.dd {
  background: #f8fafb;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  align-items: center;
  .ddimg {
    width: 48rpx;
    height: 48rpx;
    margin-right: 20rpx;
  }
  .r {
    width: calc(100% - 58rpx);
    font-size: 24rpx;
    color: #192126;
    image {
      width: 32rpx;
      height: 32rpx;
    }
    .b {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 22rpx;
      color: #a6a9af;
      margin-top: 8rpx;
    }
  }
  .ricon {
    display: flex;
    gap: 20rpx;
  }
}
.shopBox {
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 20rpx;
  background: #fff;
  .item {
    width: 100%;
    display: flex;
    align-items: center;

    margin-top: 32rpx;
    .l {
      width: 170rpx;
      font-size: 26rpx;
      color: #bebebe;
      line-height: 36rpx;
    }
    .r {
      font-size: 26rpx;
      font-weight: 500;
      color: #333;
      line-height: 34rpx;
    }
    &:first-child {
      margin-top: 0px;
    }
  }
}
.tt {
  display: flex;
  justify-content: space-between;
  margin-top: 32rpx;
  .tl {
    font-size: 32rpx;
    color: #000000;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      left: 10rpx;
      bottom: -2rpx;
      width: 96rpx;
      height: 6rpx;
      background: #81d8d0;
    }
  }
  .tr {
    background-color: #feede6;
    border-radius: 32rpx 0rpx 0rpx 32rpx;
    font-size: 22rpx;
    color: #fa540b;
    padding: 10rpx 16rpx;
  }
}
.ewmBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #767676;
  image {
    width: 320rpx;
    height: 320rpx;
    background: saddlebrown;
    margin: 40rpx 0;
  }
}
</style>
